<template>
	<view class="yueduye">
		<!-- 防止内容到状态栏 -->
		<view  class="nav-fixed" :style="{backgroundColor:bgc}"></view>
		<!-- 小说内容区 -->
		<view class="content" @click="showTime" :style="{backgroundColor:bgc,color:cor}">
			<view class="yuedu-small-title">
				{{list.title}}
			</view>
			<view class="yue-title" :style="{fontSize:fontSize+'rpx',color:cor}">
				{{list.title}}
			</view>
			<view class="yue-content" :style="{fontSize:fontSize+'rpx','line-height':lineHight+'rpx',color:cor}">
				{{list.desc}}
			</view>
		</view>
		<!-- 底部广告区 -->
		<view class="advertising" v-show="isGuangGao">
			<yuedu-guangao @quXiao="quXiao" :guangao="guangao"></yuedu-guangao>
		</view>
		<!-- 上下面弹出层 -->
		<view class="popup" v-show="isShowTop">
			<yuedu-topbtmpopup :list="list" @mulu="mulu" @shezhi="shezhi" @fenxiang="fenxiang" @isBeijing="isBeijing"></yuedu-topbtmpopup>
		</view>
		<!-- 目录弹出层 -->
		<u-popup v-model="isMuLu" mode="left" width="568rpx">
			<yuedu-mulupopup :list="list" :title="title" @back="back" @paiXu="paiXu"></yuedu-mulupopup>
		</u-popup>
		<!-- 设置弹出层 -->
		<u-popup v-model="isShezhi" mode="bottom" height="359rpx">
			<yuedu-shezhipopup @isFont="isFont" @ishangGao="ishangGao" @isBeijing="isBeijing" :fontSize="fontSize" :gao="gao" :bei="bei"></yuedu-shezhipopup>
		</u-popup>
		<!-- 分享 -->
		<u-popup v-model="isFenxiang" mode="bottom" height="300rpx">
			<yuedu-fenxxiang></yuedu-fenxxiang>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:Object,   //存放从本地缓存获取的数据
				isShowTop:false,  //上下面弹出层
				isGuangGao:true,  //控制广告显示隐藏
				isMuLu:false,  //目录弹出层
				isShezhi:false,  //设置弹出层
				lineHight:75,  //设置行高默认值
				fontSize:48,  //设置页面的字体大小默认值
				bgc:"#fff",  //背景颜色默认值
				cor:"#00000", // 默认颜色
				bei:1, //默认背景样式
				gao:Number, //行高样式
				isFenxiang:false,  //分享弹出层
				title:[
					{id:0,title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费",icon:false},
					{id:1,title:"第2章 以退为进",free:"免费",icon:false},
					{id:2,title:"第3章 这里蛋妖气",free:"免费",icon:false},
					{id:3,title:"第4章 等等，你到底是谁？",free:"免费",icon:false},
					{id:4,title:"第5章 周明府是何来头",free:"免费",icon:false},
					{id:5,title:"第6章 咦，这人看着眼熟",free:"免费",icon:false},
					{id:6,title:"第7章 生活不止眼前的苟且",free:"免费",icon:false}
				], //目录
				guangao:{
					img:"/static/index/123.jpg",
					title:"技术先进，设备精良，选购放心，选购放心，选购放心",
					content:"技术先进，设备精良，选购放心，选购放心，选购放心",
					type:"腾讯广告"
				},  //广告信息列表
			}
		},
		onLoad(){
			let _this = this
			//从本地缓存中获取数据
			uni.getStorage({
			    key: 'yuedu',
			    success: function (res) {
			       // console.log(res.data);
					_this.list = res.data;
					//从本地缓存中获取数据后删除本地缓存数据,避免造成重复渲染数据
					uni.removeStorage({
					    key: 'yuedu',
					    success: function (res) {
					        //console.log('清理成功');
					    }
					});
			    }
			});
			try {  //设置页面改字体大小
			    const value = uni.getStorageSync('isFont');
			    if (value) {
			        //console.log(value);
					this.fontSize =  value
			    }
			} catch (e) {
			    // error
			}
			try {  //设置页面改字体大小
			    const value = uni.getStorageSync('ishangGao');
			    if (value) {
			        //console.log(value);
					this.lineHight =  value.lineHight
					this.gao = value.hangGao
			    }
			} catch (e) {
			    // error
			}
			try {  //设置页面改字体大小
			    const value = uni.getStorageSync('isBeijing');
			    if (value) {
			        console.log(value);
					this.bgc =  value.bgc
					this.cor = value.cor
					this.bei = value.beiJing
			    }
			} catch (e) {
			    // error
			}
		},
		methods: {
			showTime(){  //控制上下弹出窗的显示隐藏
				//console.log(111)
				this.isShowTop =! this.isShowTop
			},
			quXiao(){  //广告的隐藏
				this.isGuangGao =! this.isGuangGao
			},
			mulu(){  //打开目录层,在打开目录层的同时要将上下弹出层给隐藏
				this.isMuLu =! this.isMuLu
				this.isShowTop =! this.isShowTop
			},
			back(){  //关闭目录
				this.isMuLu =! this.isMuLu
			},
			paiXu(){  //排序,将数组顺序颠倒
				this.title.reverse();
			},
			isFont(index){  //设置页面改字体大小
				this.fontSize =  index
			},
			ishangGao(index){  //设置页面改行高
				this.lineHight = index
			},
			isBeijing(bgc,cor){  //设置页面改背景
				this.bgc = bgc
				this.cor = cor
			},
			shezhi(){  //控制设置弹出层,并关闭其他层
				this.isShezhi =! this.isShezhi
				this.isShowTop =! this.isShowTop
			},
			fenxiang(){ //控制分享弹出层
				this.isFenxiang =! this.isFenxiang
				this.isShowTop =! this.isShowTop
			}
		}
	}
</script>

<style scoped lang="scss">
.yueduye{
	font-family: Microsoft YaHei;
	.nav-fixed{
		height: 50rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}
	.content{
		padding: 38rpx 36rpx 108rpx;;
		font-family: Microsoft YaHei;
		.yuedu-small-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #A7A7A7;
			line-height: 50rpx;
		}
		.yue-title{
			font-size: 60rpx;
			font-weight: bold;
			color: #000000;
			line-height: 70rpx;
		}
		.yue-content{
			font-size: 52rpx;
			font-weight: 400;
			color: #000000;
			line-height: 75rpx;
		}
	}
	.advertising{
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		background-color: #f1ddab;
	}
}
</style>
